<template>
  <div id="screen">
    <!-- 筛选 -->
    <van-dropdown-menu active-color="#1779ff">
      <van-dropdown-item :title="cityName" ref="ref1">
        <!-- 抖音销量 -->
        <van-cell class="screen">
          <template v-if="areaList">
            <van-area
              value="110000"
              :area-list="areaList"
              :columns-num="2"
              @cancel="cancelFn"
              @confirm="confirmFn"
              :columns-placeholder="['', '不限']"
            />
          </template>
        </van-cell>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  name: "radio_group",
  props: ["radio_values"],
  data() {
    return {
      dataList: null,
      cityName: "北京",
      areaList: null,
      listname: "", //省份
      areaListcity: "" //地区
    };
  },
  computed: {},
  created: function() {},
  mounted() {
    this.getProCategories();
  },
  watch: {},
  methods: {
    cancelFn(valObj) {
      this.$refs.ref1.toggle();
    },
    confirmFn(val) {
      this.cityName = val[0].name;
      console.log(val);
      this.$emit("getCity", this.getItemData(val));
      this.$refs.ref1.toggle();
    },
    getItemData(valObj) {
      let dataList = this.dataList;
      let rDataObj = {};
      for (let i = 0; i < dataList.length; i++) {
        let province = dataList[i];
        if (valObj[0].code == province.code) {
          rDataObj.code = province.code;
          rDataObj.pid = province.pid;
          rDataObj.name = province.name;

          if (province.codes.length) {
            for (let j = 0; j < province.codes.length; j++) {
              let cidItem = province.cid[j];
              let cityItem = province.city[j];
              let codesItem = province.codes[j];
              if (valObj[1] && valObj[1].code) {
                if (valObj[1].code == codesItem) {
                  rDataObj.city = [cityItem];
                  rDataObj.cid = [cidItem];
                  rDataObj.codes = [codesItem];
                }
              } else {
                //选中不限
                rDataObj.cid = 0;
              }
            }
          }
          break;
        }
      }
      console.log(rDataObj);
      return rDataObj;
    },
    getProCategories() {
      return this.$axios({
        method: "get",
        url: "/api/area/search"
      })
        .then(res => {
          if (res.data.code == 0) {
            let dataList = res.data.data;
            this.dataList = dataList;
            let areaList = {
              province_list: {},
              city_list: {}
            };
            for (let i = 0; i < dataList.length; i++) {
              let province = dataList[i];
              areaList.province_list[province.code] = province.name;

              if (province.codes.length) {
                for (let j = 0; j < province.codes.length; j++) {
                  let cidItem = province.codes[j];
                  let cityItem = province.city[j];
                  areaList.city_list[cidItem] = cityItem;
                }
              }
            }

            this.areaList = areaList;
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  components: {}
};
</script>

<style  lang="less">
#screen {
  width: 0.5rem;
  position: relative;
  overflow: hidden;
}
.van-picker-column__item--selected {
  color: #fd7f2c !important;
}
.radio_item_blue {
  color: #fff !important;

  background-color: #fd7f2c !important;
}
</style>
